/*
  学习目标：搭建基础路由
  步骤：
     1. 下包react-router-dom@5.3.0
     2. 创建页面组件Layout Login
     3. TODO：配置基础路由
  学习目标：配置React路由
  学习目标：设置重定向路由
  学习目标：了解-render in Props的组件设计方式
  1. props可以传任意类型的值，可以传换函数
  2. render In Props的组件设计方式
  学习目标：Route组件的第二种写法
*/ 
import React, { Component } from 'react'
// 👍 推荐将BrowserRouter重命名为Router
//  1. 导入Router、Route Switch、重定向组件
import { Router, Route, Switch } from 'react-router-dom';
import TestPage from './pages/Test'
import Login from './pages/Login'
import Layout from './pages/Layout'
import AuthRoute from './components/AuthRoute';
import history from "utils/history";
export default class App extends Component {
  render() {
    return (
         //   2. 实例化路由Router
      // 👍所有的代码，都要包在Router组件内
      
      // 3. 组装BrowserRouter
      // 💥使用Router组件替代BrowserRouter  给它分配history属性
      <Router history={history}>
        {/* Switch负责匹配到第一个组建后，就不再向后匹配 */}
        {/* 3. 通过Switch和Route组件，设置匹配规则和挂载点 */}
        {/* 👍 Switch要包住所有的组件 */}
        <Switch>
          {/* 💥React路由中，默认是不会匹配到第一个就停止匹配 */}
          {/* <Redirect path='/' to="/layout" exact></Redirect> */}
          {/* React路由中，匹配任意路径的写法:3种 */}

          {/* <Route component={() => <h1>匹配任意路径</h1>}></Route> */}
          {/* <Route path="*" component={() => <h1>匹配任意路径</h1>}></Route> */}
          {/* <Route path="/" component={() => <h1>匹配任意路径</h1>}></Route> */}
          <Route path="/test" component={TestPage}></Route>
          <Route path="/login" component={Login}></Route>
          {/*  1. 删除一级路由中重定向和layout的路径，修改path为/,模糊匹配任意路径 */}
          {/* 除了login，其它的路由，每次匹配倒要经过权限判断 */}
          {/* 3. 验证给AuthRoute传任意props属性，是否有效 */}
          <AuthRoute path="/" component={Layout}></AuthRoute>
        </Switch>
      </Router>
       // React路由的使用口诀：
      // 1. Router代表实例化组件，整个项目只用一次
      // 2. Router包住所有的diam
      // 3. Switch包住所有的Route组件
    )
  }
}

